<template>
    <div>
        <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
            <v-tooltip />
            <v-axis />
            <v-legend />
            <v-smooth-line position="month*temperature" color="city" shape="smooth" />
            <v-point position="month*temperature" color="city" shape="circle" />
        </v-chart>
    </div>
</template>
  
<script>
const DataSet = require('@antv/data-set');

const sourceData = [
    { month: 'Jan', GRI: 7.0, SDG: 3.9, SASB: 3 },
    { month: 'Feb', GRI: 6.9, SDG: 4.2, SASB: 7 },
    { month: 'Mar', GRI: 9.5, SDG: 5.7, SASB: 10 },
    { month: 'Apr', GRI: 14.5, SDG: 8.5, SASB: 5 },
    { month: 'May', GRI: 18.4, SDG: 11.9, SASB: 10 },
    { month: 'Jun', GRI: 21.5, SDG: 15.2, SASB: 6 },
    { month: 'Jul', GRI: 25.2, SDG: 17.0, SASB: 10 },
    { month: 'Aug', GRI: 26.5, SDG: 16.6, SASB: 10 },
    { month: 'Sep', GRI: 23.3, SDG: 14.2, SASB: 7 },
    { month: 'Oct', GRI: 18.3, SDG: 10.3, SASB: 10 },
    { month: 'Nov', GRI: 13.9, SDG: 6.6, SASB: 8 },
    { month: 'Dec', GRI: 9.6, SDG: 4.8, SASB: 10 },
];

const dv = new DataSet.View().source(sourceData);
dv.transform({
    type: 'fold',
    fields: ['GRI', 'SDG', 'SASB'],
    key: 'city',
    value: 'temperature',
});
const data = dv.rows;

const scale = [{
    dataKey: 'month',
    min: 0,
    max: 1,
}];

export default {
    data() {
        return {
            data,
            scale,
            height: 400,
        };
    }
};
</script>
  